<template>
  <view class="container">
    <view class="carousel">
      <swiper indicator-dots circular=true duration="400">
        <swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
          <view class="image-wrapper">
            <image
                :src="productInfo.iconUrl||'/static/index/img.png'"
                class="loaded"
                mode="aspectFill"
            ></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="introduce-section">
      <text class="title">{{ productInfo.name || "—" }}</text>
      <view class="price-box">
        <text style="color:#fff;">价格：</text>
        <!--        <text class="price-tip">¥</text>-->
        <!-- <text class="price">{{parseFloat(productInfo.priceList[0]).toFixed(4)}}</text> -->
        <text class="price">
          {{ productInfo.price }}
        </text>
        <!-- <button class="price-botton" @click="startEvaluate">评估</button> -->
        <text style="color: #686978;right: 10px;line-height: 62rpx;position: absolute;">{{ buyCount }}次付款</text>
        <!-- <text class="m-price">¥488</text>
        <text class="coupon-tip">7折</text> -->
      </view>
      <view class="bot-row">
        <text>上传时间</text>
        <text style="position: absolute;right: 10px;color: #fff;">{{ productInfo.createTime }}</text>
      </view>
<!--      <view class="bot-row">-->
<!--        <text>收款账户</text>-->
<!--        <text style="position: absolute;right: 10px;color: #fff;">钱包A</text>-->
<!--      </view>-->
      <view class="bot-row">
        <text>大小</text>
        <text style="position: absolute;right: 10px;color: #fff;">526KB</text>
      </view>
<!--      <view class="bot-row">-->
<!--        <text>下载量</text>-->
<!--        <text style="position: absolute;right: 10px;color: #fff;">200次</text>-->
<!--      </view>-->

      <view class="hr-line"></view>

      <view class="bot-row">
        <text>数据类型</text>
        <text style="position: absolute;right: 10px;color: #fff;">知识产权</text>
      </view>
<!--      <view class="bot-row">-->
<!--        <text>到期时间</text>-->
<!--        <text style="position: absolute;right: 10px;color: #fff;">{{ productInfo.updateTime }}</text>-->
<!--      </view>-->
    </view>
    <view class="hr-line"></view>


    <!--  分享 -->
    <!-- <view class="share-section" @click="share">
      <view class="share-icon">
        <text class="yticon icon-xingxing"></text>
         返
      </view>
      <text class="tit">该商品分享可领49减10红包</text>
      <text class="yticon icon-bangzhu1"></text>
      <view class="share-btn">
        立即分享
        <text class="yticon icon-you"></text>
      </view>

    </view> -->

    <view class="c2-list">
      <view class="c2-row" v-for="(item,index) in testList" :key="index"
            :class="{c2Current: c2CurrentIndex === index}" @click="c2RowClick(index)">
        {{ item.text }}
      </view>
    </view>
    <view v-if="c2CurrentIndex === 0">
      <view class="c-list">
        <view class="c-row b-b" @click="toggleSpec">
          <text class="tit">数据详情</text>
          <!-- <view class="con">
            <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
              {{sItem.name}}
            </text>
          </view>
          <text class="yticon icon-you"></text> -->
        </view>
        <!-- <view class="c-row b-b">
          <text class="tit">优惠券</text>
          <text class="con t-r red">领取优惠券</text>
          <text class="yticon icon-you"></text>
        </view> -->
        <view class="c-row b-b">
          <!-- <text class="tit">促销活动</text> -->
          <view class="con-list">
            <text>{{ productInfo.brief }}</text>
          </view>
        </view>
        <!-- <view class="c-row b-b">
          <text class="tit">服务</text>
          <view class="bz-list con">
            <text>7天无理由退换货 ·</text>
            <text>假一赔十 ·</text>
          </view>
        </view> -->
        <!-- 评价 -->
      </view>
      <view class="c-list">
        <view class="c-row b-b">
          <text class="tit">购买须知</text>
          <!-- <text>(86)</text>
          <text class="tip">好评率 100%</text>
          <text class="yticon icon-you"></text> -->
        </view>
        <view class="eva-box">
          <!-- <image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image> -->
          <view class="right">
            <!-- <text class="name">Leo yo</text> -->
            <text class="con">{{ productInfo.detail }}</text>
            <!-- <view class="bot">
              <text class="attr">购买类型：XL 红色</text>
              <text class="time">2019-04-01 19:21</text>
            </view> -->
          </view>
        </view>
      </view>
    </view>


    <!-- 流通记录 -->
    <view v-else>
      <view class="c-list" v-for="item in auditList" :key="item.id">
        <view class="c-row b-b">
          <text style="font-size:13px; color:#fff; position: relative; top:4px;">
            <text v-if="item.auditStatus === 0">待审核</text>
            <text v-else-if="item.auditStatus === 1">审核成功</text>
            <text v-else-if="item.auditStatus === 2">审核失败</text>
          </text>
          <text style="position: absolute;right: 10px; top:13px;">{{ item.createTime }}</text>
        </view>
        <view class="hr-line c-line"></view>
        <view class="c-row b-b">
          <text>来自</text>
          <text style="position: absolute;right: 10px;color: #fff;">王文翔</text>
        </view>
        <view class="c-row b-b">
          <text>去往</text>
          <text style="position: absolute;right: 10px;color: #fff;">刘梦奇</text>
        </view>
      </view>

    </view>


    <!-- 底部操作菜单 -->
    <view class="page-bottom">
      <!-- <navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
        <text class="yticon icon-xiatubiao--copy"></text>
        <text>首页</text>
      </navigator> -->
      <!-- <view class="p-b-btn" @click="toDataBag">
        <image class="bag-icon" src="/static/index/bag.png"></image>
        <text>数据袋</text>
      </view> -->
      <!-- <navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
        <image class="bag-icon" src="/static/index/bag.png"></image>

        <text>购物车</text>
      </navigator>
      <view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
        <text class="yticon icon-shoucang"></text>
        <text>收藏</text>
      </view> -->

      <view class="action-btn-group">
        <!-- <button type="primary" class=" action-btn no-border add-cart-btn"  @click="addDataBag">加入数据袋</button>
        <button type="primary" class=" action-btn no-border buy-now-btn " @click="buyData">申请数据</button> -->
        <button type="primary" class=" action-btn no-border buy-now-btn " @click="shareData">立即共享</button>
      </view>
    </view>


    <!-- 规格-模态层弹窗 -->
    <view
        class="popup spec"
        :class="specClass"
        @touchmove.stop.prevent="stopPrevent"
        @click="toggleSpec"
    >
      <!-- 遮罩层 -->
      <view class="mask"></view>
      <view class="layer attr-content" @click.stop="stopPrevent">
        <view class="a-t">
          <image
              src="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"></image>
          <view class="right">
            <text class="price">
              {{ productInfo.price }}
            </text>
            <text class="stock">库存：188件</text>
            <view class="selected">
              已选：
              <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
                {{ sItem.name }}
              </text>
            </view>
          </view>
        </view>
        <view v-for="(item,index) in specList" :key="index" class="attr-list">
          <text>{{ item.name }}</text>
          <view class="item-list">
            <text
                v-for="(childItem, childIndex) in specChildList"
                v-if="childItem.pid === item.id"
                :key="childIndex" class="tit"
                :class="{selected: childItem.selected}"
                @click="selectSpec(childIndex, childItem.pid)"
            >
              {{ childItem.name }}
            </text>
          </view>
        </view>
        <button class="btn" @click="toggleSpec">完成</button>
      </view>
    </view>
    <!-- 分享 -->
    <share
        ref="share"
        :contentHeight="580"
        :shareList="shareList"
    ></share>
  </view>
</template>

<script>
import {getPicture, getPublicProduct} from "@/api/public";
import {getEvaluate} from "@/api/evaluate";
import {getProductInfo, updateProduction, addProduction} from "@/api/product";
import {addDataCart} from "@/api/cart";
import {getOrderList} from "@/api/trade";
import share from '@/components/share';

//TODO 获取单个数据产品的流通记录
export default {
  components: {
    share
  },
  data() {
    return {
      productId: "",
      productInfo: {
        price: "面议"
      },
      specClass: 'none',
      specSelected: [],
      productDetail: {},
      favorite: true,
      shareList: [],
      testList: [
        {text: '数据详情'},
        {text: '流通记录'},
      ],
      buyCount: 0,
      c2CurrentIndex: 0,
      auditList:[],
      imgList: [
        {
          src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
        },
        {
          src: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
        },
        {
          src: 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'
        }
      ],
      desc: `
					<div style="width:100%">
						<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i4/479184430/O1CN01nCpuLc1iaz4bcSN17_!!479184430.jpg_400x400.jpg" />
						<img style="width:100%;display:block;" src="https://gd2.alicdn.com/imgextra/i2/479184430/O1CN01gwbN931iaz4TzqzmG_!!479184430.jpg_400x400.jpg" />
						<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i3/479184430/O1CN018wVjQh1iaz4aupv1A_!!479184430.jpg_400x400.jpg" />
						<img style="width:100%;display:block;" src="https://gd4.alicdn.com/imgextra/i4/479184430/O1CN01tWg4Us1iaz4auqelt_!!479184430.jpg_400x400.jpg" />
						<img style="width:100%;display:block;" src="https://gd1.alicdn.com/imgextra/i1/479184430/O1CN01Tnm1rU1iaz4aVKcwP_!!479184430.jpg_400x400.jpg" />
					</div>
				`,
      specList: [
        {
          id: 1,
          name: '尺寸',
        },
        {
          id: 2,
          name: '颜色',
        },
      ],
      specChildList: [
        {
          id: 1,
          pid: 1,
          name: 'XS',
        },
        {
          id: 2,
          pid: 1,
          name: 'S',
        },
        {
          id: 3,
          pid: 1,
          name: 'M',
        },
        {
          id: 4,
          pid: 1,
          name: 'L',
        },
        {
          id: 5,
          pid: 1,
          name: 'XL',
        },
        {
          id: 6,
          pid: 1,
          name: 'XXL',
        },
        {
          id: 7,
          pid: 2,
          name: '白色',
        },
        {
          id: 8,
          pid: 2,
          name: '珊瑚粉',
        },
        {
          id: 9,
          pid: 2,
          name: '草木绿',
        },
      ]
    };
  },
  async onLoad(options) {

    //接收传值
    this.productId = options.id;
    if (this.productId) {
      // this.$api.msg(`点击了${this.productId}`);
      // let productList = await getPublicProduct();
      // this.productDetail=productList.rows[this.productId];
      // console.log("detail:",productList.rows[this.productId]);

      getProductInfo(this.productId).then(res => {
        this.productInfo = res.data;
        this.buyCount = res.data.buyCount;
        // 设置初始价格为面议
        this.productInfo.price = '面议';
        // 检查 productInfo 和 priceList 是否存在且不为 null
        if (this.productInfo && this.productInfo.priceList) {
          // 检查 priceList 是否为数组且至少有一个元素
          if (Array.isArray(this.productInfo.priceList) && this.productInfo.priceList.length > 0) {
            // 获取 priceList 的第一个元素
            const firstPriceItem = this.productInfo.priceList[0];

            // 检查第一个元素是否有 price 属性且不为 null
            if (firstPriceItem?.price !== null) {
              // 设置 price 为第一个元素的 price，并保留两位小数
              this.productInfo.price = firstPriceItem.price.toFixed(2);
            }
          }
        }
      });

      getOrderList(this.productId).then(res=>{
        this.auditList = res.rows;
        console.log('this.auditList',this.auditList);
      })
      // getEvaluate(productInfo.id).then(res=>{
      // 	console.log("数据评估:",res.data);
      // 	if(this.productInfo.priceList === undefined){
      // 		this.productInfo.priceList = [];
      // 	}
      // 	this.productInfo.priceList.push(res.data.Price);
      // });
      console.log("detail:", this.productInfo);
    }
    //规格 默认选中第一条
    this.specList.forEach(item => {
      for (let cItem of this.specChildList) {
        if (cItem.pid === item.id) {
          this.$set(cItem, 'selected', true);
          this.specSelected.push(cItem);
          break; //forEach不能使用break
        }
      }
    })
    this.shareList = await this.$api.json('shareList');
    // this.loadData();
  },
  methods: {

    async loadData() {
      let data = await getProductInfo(this.productId);
      this.productInfo = data.data;
    },
    c2RowClick(index) {
      this.c2CurrentIndex = index;
    },
    //规格弹窗开关
    toggleSpec() {
      if (this.specClass === 'show') {
        this.specClass = 'hide';
        setTimeout(() => {
          this.specClass = 'none';
        }, 250);
      } else if (this.specClass === 'none') {
        this.specClass = 'show';
      }
    },
    //选择规格
    selectSpec(index, pid) {
      let list = this.specChildList;
      list.forEach(item => {
        if (item.pid === pid) {
          this.$set(item, 'selected', false);
        }
      })

      this.$set(list[index], 'selected', true);
      //存储已选择
      /**
       * 修复选择规格存储错误
       * 将这几行代码替换即可
       * 选择的规格存放在specSelected中
       */
      this.specSelected = [];
      list.forEach(item => {
        if (item.selected === true) {
          this.specSelected.push(item);
        }
      })

    },
    //分享
    share() {
      this.$refs.share.toggleMask();
    },
    //收藏
    toFavorite() {
      this.favorite = !this.favorite;
    },
    //数据袋
    toDataBag() {
      uni.navigateTo({
        url: `/pages/dataBag/dataBag`
      })
    },
    //加入数据袋
    async addDataBag() {
      let parame = {
        "number": 1,
        "productId": this.productId,
        "priceId": this.productInfo.priceList[0].id
      }
      let result = await addDataCart(parame);
      console.log(result);
    },
    //申请数据
    buyData() {
      let id = this.productInfo.id;
      let priceId = this.productInfo.priceList[0].id;
      uni.navigateTo({
        url: `/pages/order/orderDetails?id=${id}&priceId=${priceId}`
      })
    },
    // 共享数据
    shareData() {
      uni.navigateTo({
        // url: `/pages/contacts/contacts?id=${this.productId}`
        url: `/pages/contacts/contacts`
      })
    },
    // 开始评估
    // startEvaluate() {
    // 	let priceList = [];
    // 	getEvaluate(99).then(res=>{
    // 		console.log("数据评估:",res.data);
    // 		priceList.push(res.data.Price);
    // 		console.log('priceList:',priceList)
    // 	});
    // 	const updatedProductInfo = {
    // 		...this.productInfo,
    // 		id:99,
    // 		name:'产品99',
    // 		priceList
    // 	};
    // 	// 修改数据
    // 	updateProduction(updatedProductInfo).then(r=>{
    // 		console.log('更新成功',r);
    // 	})
    // 	this.loadData();
    // },
    stopPrevent() {
    }
  },

}
</script>

<style lang='scss'>
page {
  background: $page-color-base;
  padding-bottom: 160upx;
}

.hr-line {
  height: 0.1px;
  background-color: transparent;
  border: none;
  box-shadow: 0 1px 0 0 rgba(220, 238, 247, 0.1);
  margin: 6px 0px;

}

.c-line {
  margin: 0 10px;
}

.icon-you {
  font-size: $font-base + 2upx;
  color: #888;
}

.carousel {
  height: 722upx;
  position: relative;

  swiper {
    height: 100%;
  }

  .image-wrapper {
    width: 100%;
    height: 100%;
  }

  .swiper-item {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 750upx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

}

.bag-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

/* 标题简介 */
.introduce-section {

  padding: 20upx 30upx;

  .title {
    font-size: 32upx;
    color: #fff;
    height: 50upx;
    line-height: 50upx;
  }

  .price-box {
    display: flex;
    align-items: baseline;
    height: 64upx;
    padding: 10upx 0;
    font-size: 26upx;
    color: #fbdb92;

    .price {
      margin-left: 20upx;
    }

    .price-botton {
      margin: 0 0 0 10upx;
      padding: 10px;
      font-size: 28upx;
      height: 40rpx;
      line-height: 0rpx;
    }
  }

  .price {
    font-size: $font-lg + 2upx;
  }

  .m-price {
    margin: 0 12upx;
    color: $font-color-light;
    text-decoration: line-through;
  }

  .coupon-tip {
    align-items: center;
    padding: 4upx 10upx;
    background: $uni-color-primary;
    font-size: $font-sm;
    color: #fff;
    border-radius: 6upx;
    line-height: 1;
    transform: translateY(-4upx);
  }

  .bot-row {
    display: flex;
    align-items: center;
    height: 50upx;
    font-size: $font-sm;
    color: #787986;

    text {
      flex: 1;
    }
  }
}

/* 分享 */
.share-section {
  display: flex;
  align-items: center;
  color: $font-color-base;
  background: linear-gradient(left, #fdf5f6, #fbebf6);
  padding: 12upx 30upx;

  .share-icon {
    display: flex;
    align-items: center;
    width: 70upx;
    height: 30upx;
    line-height: 1;
    border: 1px solid $uni-color-primary;
    border-radius: 4upx;
    position: relative;
    overflow: hidden;
    font-size: 22upx;
    color: $uni-color-primary;

    &:after {
      content: '';
      width: 50upx;
      height: 50upx;
      border-radius: 50%;
      left: -20upx;
      top: -12upx;
      position: absolute;
      background: $uni-color-primary;
    }
  }

  .icon-xingxing {
    position: relative;
    z-index: 1;
    font-size: 24upx;
    margin-left: 2upx;
    margin-right: 10upx;
    color: #fff;
    line-height: 1;
  }

  .tit {
    font-size: $font-base;
    margin-left: 10upx;
  }

  .icon-bangzhu1 {
    padding: 10upx;
    font-size: 30upx;
    line-height: 1;
  }

  .share-btn {
    flex: 1;
    text-align: right;
    font-size: $font-sm;
    color: $uni-color-primary;
  }

  .icon-you {
    font-size: $font-sm;
    margin-left: 4upx;
    color: $uni-color-primary;
  }
}

.c-list {
  font-size: $font-sm + 2upx;
  color: $font-color-base;
  background: #2f3045;
  margin: 20rpx 30rpx;
  border-radius: 4px;

  .c-row {
    display: flex;
    align-items: center;
    padding: 20upx 30upx;
    position: relative;
  }

  .tit {
    width: 140upx;
    color: #fff;
  }

  .con {
    flex: 1;
    color: $font-color-dark;

    .selected-text {
      margin-right: 10upx;
    }
  }

  .bz-list {
    height: 40upx;
    font-size: $font-sm+2upx;
    color: #797a87;;

    text {
      display: inline-block;
      margin-right: 30upx;
    }
  }

  .con-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #797a87;
    line-height: 40upx;
  }

  .red {
    color: $uni-color-primary;
  }
}

.c2-list {
  margin-top: 10px;
  display: flex;
  height: 40px;
  padding: 0 15px;
  position: relative;

  .c2-row {
    height: 50%;
    font-size: 13px;
    width: 70px;
    color: darkgray;
    position: relative;

    &.c2Current {
      color: white;
      font-size: 14px;

      &:after {
        content: '';
        position: absolute;
        left: 40%;
        transform: translate(-50%, 120%);
        width: 40upx;
        height: 20upx;
        border-radius: 100%;
        border-bottom: 3px solid #00aaff;
      }
    }
  }
}

/* 评价 */
.eva-section {
  display: flex;
  flex-direction: column;
  padding: 20upx 30upx;
  background: #2f3045;
  margin-top: 16upx;
  margin: 20rpx 30rpx;
  border-radius: 4px;

  .e-header {
    display: flex;
    align-items: center;
    height: 70upx;
    font-size: $font-sm + 2upx;
    color: #fff;

    .tit {
      font-size: $font-base + 2upx;

      margin-right: 4upx;
    }

    .tip {
      flex: 1;
      text-align: right;
    }

    .icon-you {
      margin-left: 10upx;
    }
  }
}

.eva-box {
  display: flex;
  padding: 20upx 0;

  .portrait {
    flex-shrink: 0;
    width: 80upx;
    height: 80upx;
    border-radius: 100px;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: $font-base;
    color: $font-color-base;
    /* padding-left: 26upx; */
    .con {
      font-size: $font-base;

      padding: 20upx 0;
    }

    .bot {
      display: flex;
      justify-content: space-between;
      font-size: $font-sm;
      color: $font-color-light;
    }
  }
}

/*  详情 */
.detail-desc {
  background: #2f3045;
  margin-top: 16upx;
  margin: 20rpx 30rpx;

  .d-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80upx;
    font-size: $font-base + 2upx;
    color: $font-color-dark;
    position: relative;

    text {
      padding: 0 20upx;
      background: #fff;
      position: relative;
      z-index: 1;
    }

    &:after {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%);
      width: 300upx;
      height: 0;
      content: '';
      border-bottom: 1px solid #ccc;
    }
  }
}

/* 规格选择弹窗 */
.attr-content {
  padding: 10upx 30upx;

  .a-t {
    display: flex;

    image {
      width: 170upx;
      height: 170upx;
      flex-shrink: 0;
      margin-top: -40upx;
      border-radius: 8upx;;
    }

    .right {
      display: flex;
      flex-direction: column;
      padding-left: 24upx;
      font-size: $font-sm + 2upx;
      color: $font-color-base;
      line-height: 42upx;

      .price {
        font-size: $font-lg;
        color: $uni-color-primary;
        margin-bottom: 10upx;
      }

      .selected-text {
        margin-right: 10upx;
      }
    }
  }

  .attr-list {
    display: flex;
    flex-direction: column;
    font-size: $font-base + 2upx;
    color: $font-color-base;
    padding-top: 30upx;
    padding-left: 10upx;
  }

  .item-list {
    padding: 20upx 0 0;
    display: flex;
    flex-wrap: wrap;

    text {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eee;
      margin-right: 20upx;
      margin-bottom: 20upx;
      border-radius: 100upx;
      min-width: 60upx;
      height: 60upx;
      padding: 0 20upx;
      font-size: $font-base;
      color: $font-color-dark;
    }

    .selected {
      background: #fbebee;
      color: $uni-color-primary;
    }
  }
}

/*  弹出层 */
.popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;

  &.show {
    display: block;

    .mask {
      animation: showPopup 0.2s linear both;
    }

    .layer {
      animation: showLayer 0.2s linear both;
    }
  }

  &.hide {
    .mask {
      animation: hidePopup 0.2s linear both;
    }

    .layer {
      animation: hideLayer 0.2s linear both;
    }
  }

  &.none {
    display: none;
  }

  .mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .layer {
    position: fixed;
    z-index: 99;
    bottom: 0;
    width: 100%;
    min-height: 40vh;
    border-radius: 10upx 10upx 0 0;
    background-color: #fff;

    .btn {
      height: 66upx;
      line-height: 66upx;
      border-radius: 100upx;
      background: $uni-color-primary;
      font-size: $font-base + 2upx;
      color: #fff;
      margin: 30upx auto 20upx;
    }
  }

  @keyframes showPopup {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes hidePopup {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes showLayer {
    0% {
      transform: translateY(120%);
    }
    100% {
      transform: translateY(0%);
    }
  }
  @keyframes hideLayer {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(120%);
    }
  }
}

/* 底部操作菜单 */
.page-bottom {
  padding: 10px 0;
  position: fixed;
  bottom: 0px;
  z-index: 95;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  background: #2f3045;
  box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);


  .p-b-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: $font-sm;
    color: $font-color-base;
    width: 96upx;
    height: 80upx;

    .yticon {
      font-size: 40upx;
      line-height: 48upx;
      color: $font-color-light;
    }

    &.active, &.active .yticon {
      color: $uni-color-primary;
    }

    .icon-fenxiang2 {
      font-size: 42upx;
      transform: translateY(-2upx);
    }

    .icon-shoucang {
      font-size: 46upx;
    }
  }

  .action-btn-group {
    display: flex;
    height: 76upx;
    border-radius: 100px;
    overflow: hidden;
    background: linear-gradient(to right, #2493f1, #14d1cc);
    // margin-left: 100px;
    width: 90%;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      top: 50%;
      right: 50%;
      transform: translateY(-50%);
      height: 28upx;
      width: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.5);
    }

    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 180upx;
      height: 100%;
      font-size: $font-base;
      padding: 0;
      border-radius: 0;
      background: transparent;
    }
  }
}

</style>
